Add note on disabling default styles #11787
Conversation
✅ Deploy Preview for astro-docs-2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
ascorbic
force-pushed
the
disable-image-styles
branch
from
4d98101 to
4541591
Compare
sarah11918
added
add new content
| ## Overriding image styles | ||
|
|
||
| The responsive image component applies a small number of styles to ensure they resize correctly. The applied styles depend on the layout type, and are designed to give the best behavior for the generated `srcset` and `sizes` attributes. These are the default styles: | ||
| The responsive image component applies a small number of styles to ensure they resize correctly. The applied styles depend on the layout type, and are designed to give the best behavior for the generated `srcset` and `sizes` attributes. You can override them with your own styles, or disable them entirely by setting [`image.experimentalDefaultStyles`](/en/reference/configuration-reference/#imageexperimentaldefaultstyles) to `false` if you prefer to handle styling them yourself. |
There was a problem hiding this comment.
| The responsive image component applies a small number of styles to ensure they resize correctly. The applied styles depend on the layout type, and are designed to give the best behavior for the generated `srcset` and `sizes` attributes. You can override them with your own styles, or disable them entirely by setting [`image.experimentalDefaultStyles`](/en/reference/configuration-reference/#imageexperimentaldefaultstyles) to `false` if you prefer to handle styling them yourself. | |
| The responsive image component applies a small number of styles to ensure images resize correctly. The applied styles depend on the layout type, and are designed to give the best behavior for the generated `srcset` and `sizes` attributes. You can disable them by setting [`image.experimentalDefaultStyles`](/en/reference/configuration-reference/#imageexperimentaldefaultstyles) to `false` if you prefer to handle styling them yourself. |
The "override or disable" made it sound like you could access these directly to rewrite, but really, if you set this to false, they just ARE disabled, right?
There was a problem hiding this comment.
You can override them with your own styles (like any CSS) without disabling them, so it should be the default choice if someone just wants to change a single thing. It's only really Tailwind 4 that can't do it like that
There was a problem hiding this comment.
Ah, the sentence before could be taken ambiguously as in "by setting false, you can override or disable". ~~(Since here, we're defining what the config option does) oops, this is not the config ref part!
Let me take a shot at it so it's clear that the config option refers only to disabling entirely.
|
OK, pushed a commit for what I think is a more logical flow to incorporate the new info. We did talk about overriding styles elsewhere, so this sets up:
|
src/content/docs/en/reference/experimental-flags/responsive-images.mdx
Outdated
Show resolved
Hide resolved
Co-authored-by: Matt Kane <[email protected]>
sarah11918
left a comment
sarah11918
left a comment
There was a problem hiding this comment.
This LGTM! Will need to wait for the feature release, but approved for then!
sarah11918
added
the
Merge Queue
|
Fixes the prop name in the original jsdoc: withastro/astro#13869 |
4 participants
Description (required)
Adds info on disabling default responsive image styles. withastro/astro#13851
This has not yet been released
Related issues & labels (optional)